<template>
  <div>
    <div class="top-bacc">
      <form action="/">
        <van-search
          v-model="value"
          show-action
          background="rgba(0,0,0,0)"
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">
              <van-icon size="1.5rem" name="scan" />
            </div>
          </template>
        </van-search>
      </form>

      <div>
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(item,index) in arr" :key="index">
            <div class="carousel">
              <h3>Banner Slogan</h3>
              <h4>Subtitle</h4>
              <van-button type="round" color="rgba(219,76,42)" plain>ORDER NOW</van-button>
              <van-image
                class="carouse-img"
                round
                width="8rem"
                height="8rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
              />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="top-logo">
      <div>
        <van-icon color="white" size="2rem" name="notes-o" />
        <h3>Menu</h3>
      </div>
      <div>
        <van-icon color="white" size="2rem" name="qr" />
        <h3>Category</h3>
      </div>
      <div>
        <van-icon color="white" size="2rem" name="bag-o" />
        <h3>About</h3>
      </div>
      <div>
        <van-icon color="white" size="2rem" name="friends-o" />
        <h3>Queue</h3>
      </div>
      <div>
        <van-icon color="white" size="2rem" name="phone-o" />
        <h3>Cont</h3>
      </div>
    </div>

    <div>
      <h3 class="notice">小程序：公告</h3>
      <h2>Featured</h2>
      <div class="featured">
        <div class="featured-div" v-for="(item,index) in arr" :key="index">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
          <div class="featured-add">
            <div>
              <h4>Dish name</h4>
              <p>￥20.00</p>
            </div>
            <div>
              <van-icon size="3rem" color="rgb(242,132,66)" name="add" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <h2>Recommended for you</h2>

      <div class="recommended-div" v-for="(item,index) in arr" :key="index">
          <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt />
        <div class="recommended-div1">
          <h4>Dish name</h4>
          <p>This is the description of the dish including ingredients,flavors ect.</p>
          <div class="recommended-add">
            <div>
              <h5>1234 dishessold</h5>
              <h3>￥20.00</h3>
            </div>
            <van-icon size="2.5rem" color="rgb(242,132,66)" name="add" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      value: "",
      current: 0,
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onChange(index) {
      this.current = index;
    }
  }
};
</script>
<style scoped>
.top-bacc {
  background-color: rgb(255, 222, 129);
  border-radius: 0 0 30% 30%;
  padding-bottom: 3rem;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.carousel {
  background-color: violet;
  border-radius: 2rem;
  padding: 2rem;
  margin: 0 1rem;
  color: white;
}

.carousel .carouse-img {
  position: relative;
  float: right;
  bottom: 5rem;
}

.top-logo {
  display: flex;
  overflow: scroll;
  position: relative;
  bottom: 3rem;
}
.top-logo div {
  min-width: 4rem;
  color: white;
  padding: 0.5rem;
  text-align: center;
  background-color: rgb(179, 209, 84);
  margin-left: 1.5rem;
  line-height: 0rem;
  border-radius: 1rem;
}

.featured {
  overflow: scroll;
  /* border-radius: 1rem 1rem 1rem 1rem; */
  margin-top: -2rem;
  display: flex;
}
.featured .featured-div img {
  border-radius: 1.5rem 1.5rem 0 0;
  width: 15rem;
}
.featured .featured-div {
  /* background-color: yellow; */
  margin-left: 2rem;
  margin-top: 2rem;
  width: 15rem;
  height: 15rem;
  border-radius: 1.5rem;
  box-shadow: 0 0.7rem 0.7rem -0.7rem #5e5e5e;
}
.featured .featured-div .featured-add {
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 0.3rem;
}

.recommended-div img {
  width:40%;
  border-radius: 1rem;
}
.recommended-div {
  display: flex;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-top: 1rem;
  border-radius: 1rem;
  box-shadow:2px 2px 5px #000;
}
.recommended-div1 {
  margin-left: 1rem;
}

.recommended-div p{
  margin-top: -.5rem;
  color: rgba(30,32,56,.6);
  line-height: .8rem;
}
.recommended-add{
  margin-top: -1rem;
  display: flex;
  align-items : center; 
  justify-content : space-between;
  line-height: 0rem;
}
.recommended-add h5{
  color: rgba(30,32,56,.8);
}



.notice {
  color: red;
}
</style>